{% extends "base.html" %}
{% import "book-macros.html" as book_macros %}
{% block head_extensions %}
<script src="/optional-helpers.js"></script>
{% endblock %}

{% block content %}
<div class="book-page">
    <input type="checkbox" style="display: none" id="show-book-nav" />
    <nav class="book-nav" role="navigation">
        {% block menu %}
        {% set index = get_section(path="learn/book_cn/_index.md") %}
        <ul class="book-nav-sections-container book-nav-sections">
            {% for s in index.subsections %}
            {{ book_macros::book_nav_section(section_path=s, section_number=loop.index) }}
            {% endfor %}
        </ul>
        {% endblock menu %}
    </nav>
    <div class="book-content">
        {% set root_section = get_section(path="learn/book_cn/_index.md") %}

        {% set previous_section = false %}
        {% set found_current = false %}

        {% set all_sections = [] %}
        {% for p in root_section.subsections %}
            {% set_global all_sections = all_sections | concat(with=p) %}
            {% set section_obj = get_section(path=p) %}

            {% for p2 in section_obj.subsections %}
                {% set_global all_sections = all_sections | concat(with=p2) %}
                {% set subsection = get_section(path=p2) %}
                {% if subsection.subsections %}
                    {% set_global all_sections = all_sections | concat(with=subsection.subsections) %}
                {% endif %}
            {% endfor %}
        {% endfor %}

        {% for p in all_sections %}
            {% set section_obj = get_section(path=p) %}
            {% if found_current %}
                <a id="book-pager-bar-next" href="{{section_obj.permalink}}" class="book-pager-bar book-pager-bar-next">
                    <div class="book-pager-bar-icon book-pager-bar-icon-next">
                    <img src="/assets/pager_next.svg" class="book-pager-image book-pager-image-right" />
                    </div>
                </a>
                {% break %}
            {% endif %}

            {% if current_path == section_obj.path %}
             {% set_global found_current = true %}
             {% if previous_section %}
                <a id="book-pager-bar-previous" href="{{previous_section.permalink}}" class="book-pager-bar book-pager-bar-previous">
                    <div class="book-pager-bar-icon book-pager-bar-icon-previous">
                        <img src="/assets/pager_previous.svg" class="book-pager-image book-pager-image-left" />
                    </div>
                </a>
             {% endif %}
            {% endif %}

            {% set_global previous_section = section_obj %}

        {% endfor %}

        <h1>
            {% if section.extra.long_title %}
                {{ section.extra.long_title }}
            {% else %}
                {{ section.title }}
            {% endif %}
            {% if section.extra.subtitle %}
                <span class="book-page-subtitle">({{section.extra.subtitle}})</span>
            {% endif %}
        </h1>
        <div class="media-content">{{ section.content | safe }}</div>
        <div class="book-pagers" />
    </div>
</div>

{% endblock content %}